<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>专题</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
	<script src="js/config.js"></script>
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="js/component.js?v=78"></script>
	<script src="js/navbar-component.js?v=2"></script>
	<script src="https://unpkg.zhimg.com/vue-router@3.4.9/dist/vue-router.js"></script>
</head>

<body>
	<div id="app" v-cloak>
		<nav-top-bar linktitle="专题"></nav-top-bar>
		<!-- <div class="zhuanti-video">
			<video x5-playsinline="" playsinline="" x-webkit-airplay="allow" style="object-fit:fill" id="video" controls
				preload="auto" width="100%" :src="videoUrl">
			</video>
		</div> -->
		<div class="zhuanti-cover">
			<img :src="data.cover_url" />
		</div>
		<div class="zhuanti-wrapper">
			<div class="zhuanti-nav">
				<span v-bind:class="tab == 2? 'zhuanti-nav-cell on':''" @click="switchTab(2)">介绍</span>
				<span v-bind:class="tab == 1? 'zhuanti-nav-cell on':''" @click="switchTab(1)">目录</span>
			</div>
			<div class="zhuantimulu_cont" v-if="tab == 1">
				<div class="mulu-total">共{{data.sub.length}}讲</div>
				<ul class="mulu-shipin">
					<li v-for="(item,index) in data.sub" v-bind:key="index" @click="goVideoStudy(item.id)">
						<div class="shipin-title">{{item.title}}</div>
						<div class="shipin-time d-f a-c-c j-c-s">
							<div class="time-box d-f a-c-c">
								<img src="img/index/icon_zhuanti_ship.png" class="shipin-icon" />
								时长{{ durationFormat(item.duration) }}
							</div>
							<div class="bofang-statu">已观看{{ item.progress }}%</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="zhuantimulu_cont" v-if="tab == 2">
				<div class="tixing">
					<img src="img/index/icon_zhuanti_tixing.png" class="tixing-icon" />
					<span class="d-f flex1">开启上新提醒，有新课上架时将通知您</span>
					<span class="tixing-btn">立即开启</span>
				</div>
				<div class="zhuantimulu-xq">
					<p class="zhuantimulu-xq-title">{{data.title}}</p>
					<p class="zhuantimulu-xq-renshu">1289人学习</p>
					<div class="zhuantimulu-xq-money">
						<span>¥{{ data.fee }}</span>
						<span class="zk-label">会员免费</span>
					</div>
					<div class="total-title">共{{data.sub.length}}讲</div>
					<div class="zhuanti-jieshao" style="padding:20px;">
						{{data.desc}}
					</div>
				</div>
			</div>

		</div>
		<div class="zhuanti-foot">
			<button class="zhuanti-foot-btn" v-if="studyPlanStatus" @click="goStudyPlan">查看我的学习计划</button>
			<button class="zhuanti-foot-btn" v-else @click="addStudyPlan">加入我的学习计划</button>
		</div>
		<!-- 专题目录弹框 -->
		<div class="likePop" v-if="showBuy">
			<div class="pop-mask" @click="showBuy=false"></div>
			<div class="likeCont">
				<p class="likeCont-text">立即购买课程？</p>
				<div class="like-foot">
					<button class="like-foot-btn buy-foot-btn" @click="goVip()">购买VIP</button>
					<button class="like-foot-btn like-btn-ljsz" @click="buy()">购买专栏</button>
				</div>
			</div>
		</div>
		<!-- 通用toast弹窗 -->
		<div class="toast" v-show="toastShow">
			{{toastText}}
		</div>
	</div>
</body>
<script>
	var router = new VueRouter({
		mode: 'history'
	})
	var vue = new Vue({
		el: "#app",
		router,
		data() {
			return {
				data: {
					sub: []
				},
				id: 0,
				tab: 2,
				studyPlanStatus: false,

				videoUrl: '',

				toastText: '',
				toastShow: false,

				showBuy: false,
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.getTopic();
		},
		methods: {
			getTopic() {
				axios.get('/mp/topic/getTopic/id/' + this.id).then(res => {
					this.data = res.data;
					// if (this.data.video_desc_id) {
					// this.getVideoInfo(this.data.video_desc_id);
					// };
					this.getStudyPlan();
				});
			},
			getStudyPlan() {
				axios.get('/mp/studyPlan/get', { params: { src_id: this.id, type: 2 } }).then(res => {
					if (1 === res.data.code) {
						this.studyPlanStatus = res.data.data;
					} else {
						this.toast(res.data.msg);
					}
				});
			},
			getVideoInfo(video_desc_id) {
				axios.post('/mp/video/videoInfoByOutId', { outId: video_desc_id }).then(res => {
					this.videoUrl = res.data.PlayInfoList['PlayInfo'][0]['PlayURL'];
					this.coverUrl = res.data.VideoBase['CoverURL'];
				}).catch(e => {
					this.toast('视频信息获取失败', 10000);
				});
			},
			switchTab(tab) {
				this.tab = tab
			},
			addStudyPlan() {
				axios.get('/mp/studyPlan/add', { params: { src_id: this.id, type: 2 } }).then(res => {
					if (1 === res.data.code) {
						if (res.data.data) {
							this.studyPlanStatus = true;
							this.toast('加入成功');
						} else {
							this.showBuy = true;
						}
					} else {
						this.toast(res.data.msg);
					}
				});
			},
			goVideoStudy(id) {
				if (this.studyPlanStatus) {
					window.location.href = "/shipinxuexi.html?id=" + id;
				} else {
					this.toast('请先添加到学习计划');
				}
			},
			goStudyPlan() {
				window.location.href = "/xuexi.html";
			},
			goVip() {
				window.location.href = "/VIP.html";
			},
			toast(message, time = 3000) {
				this.toastText = message;
				this.toastShow = true;
				setTimeout(() => {
					this.toastShow = false;
				}, time);
			},
			durationFormat(second) {
				let time = '';
				if (second > 3600) {
					// 超过1小时
					time = parseInt(second / 3600) + ':';
					second = second % 3600;
				}
				return time + parseInt(second / 60) + ':' + parseInt(second % 60);
			},
			buy() {
				this.showBuy = false;
				axios.post('/mp/order/order', { id: this.id, type: 'topic' }).then(e => {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": e.data.appId,
						"nonceStr": e.data.nonceStr,
						"package": e.data.package,
						"paySign": e.data.paySign,
						"signType": e.data.signType,
						"timeStamp": e.data.timeStamp,
					}, (res) => {
						switch (res.err_msg) {
							case 'get_brand_wcpay_request:cancel':
								// alert('用户取消支付！');
								break;
							case 'get_brand_wcpay_request:fail':
								// alert('支付失败！（' + res.err_desc + '）');
								break;
							case 'get_brand_wcpay_request:ok':
								// alert('支付成功！');
								this.addStudyPlan();
								break;
							default:
								// console.log(JSON.stringify(res));
								// alert(JSON.stringify(res));
								break;
						}
					});
				});
			}
		}
	})
</script>

</html>